<template>
    <div class="goodslists">
        <!-- 顶部 -->
            <van-row>
                <van-col span="8" class="top_tui"><van-icon name="checked" />30天无忧退货</van-col>
                <van-col span="8" class="top_tui"><van-icon name="checked" />48小时快速退费</van-col>
                <van-col span="8" class="top_tui"><van-icon name="checked" />满88元免邮费 </van-col>
            </van-row>
        <!-- /顶部 -->
        <!-- 轮播 -->
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(v,k) in gallery" :key="k">
                    <img :src="v.img_url" alt="">
                </van-swipe-item>
            </van-swipe>
        <!-- 轮播 -->
        <!-- 商品详情 -->
            <div class="info">
                <h2>{{info.name}}</h2>
                <section>{{info.goods_brief}}</section>
                <div>￥ {{info.retail_price | keepTwoNum}} 元</div>
            </div>
        <!-- /商品详情 -->
        <!-- 弹出框 -->
        <van-cell is-link @click="showPopup">展示弹出层</van-cell>
        <van-popup v-model="show" position="bottom" closeable :style="{ height: '30%' }"  class="popup_goods" overlay-class="overlay" >
            <div class="goods_detail_top">
                <img :src="info.list_pic_url" width="100px" alt="">
                <div class="top_right">
                    <section>价格：￥ {{info.retail_price | keepTwoNum}} 元</section>
                    <section>库存：{{info.goods_number}}</section>
                </div>
            </div>
            <div class="goods_detail_bottom">
                <section>数量:</section>
                <van-stepper v-model="value" />
            </div>
        </van-popup>
        <!-- /弹出框 -->
        <!-- 商品参数 -->
            <div class="commodity_param">
                <h2>商品参数</h2>
                <ul>
                    <li v-for="(v,k) in attribute" :key="k">
                        <span>{{v.name}}</span>
                        <i>{{v.value}}</i>
                    </li>
                </ul>
            </div>
        <!-- /商品参数 -->
        <!-- 常见问题 -->
            <div class="issuei">
                <div class="mytitle">
                    <span></span>
                    <h3>常见问题</h3>
                </div>
                <ul class="content">
                    <li v-for="(v,k) in issue" :key="v.id">
                        <h3>·{{v.question}}</h3>
                        <p>
                            {{v.answer}}
                        </p>
                    </li>
                </ul>
            </div>
        <!-- /常见问题 -->
        <!-- 相关产品 -->
             <div class="related">
                <div class="mytitle">
                    <span></span>
                    <h3>相关产品</h3>
                </div>
                <div class="goods topic1">
                    <div class="goods-pic">
                        <div class="goods_pic" @click="goods_list(v.id)" v-for="v in realted_goods" :key="v.id" v-lazy="v.list_pic_url">
                            <img :src="v.list_pic_url" alt="" >
                            <span>{{v.name}}</span>
                            <span> ￥ {{v.retail_price.toFixed(2)}} 元 </span>
                        </div>
                    </div>
                </div>
            </div>
        <!-- /相关产品 -->
        <!-- 商品导航 -->
        <van-goods-action class="commodity_navigation">
            <van-goods-action-icon icon="cart-o" icon-class="" text="购物车" @click="onClickcart" loading :badge="num" />
            <van-goods-action-icon icon="star" color="darkred" icon-class="star" @click="onClickIcon" loading text="已收藏"  />
            <van-goods-action-button type="warning" color="#be99ff"  @click="onAddCartClicked"  text="加入购物车" />
            <van-goods-action-button type="danger" color="#7232dd"   @click="onBuyClicked" text="立即购买" />
        </van-goods-action>
        <!-- /商品导航 -->
    </div>
</template>

<script>
import {goods_detail,goods_related,cart_add,cart_index,cart_goodscount} from "@/request/home.js"
import { Toast } from 'vant';
export default {
    name: 'Wjm0714GoodsDetail',

    data() {
        return {
            id:'',
            show: false,
            goods_number:'',
            info:{},
            value: 1,
            issue:[],
            realted_goods:[],
            attribute:[],
            gallery:[],
            attribute:[],
            productList:[],
            num:''
        };
    },

    mounted() {
        
    },
    filters:{
        keepTwoNum(v){
            return Number(v).toFixed(2);
        }
    },
    methods: {
        // 商品详情
        goods_list(id){
            this.$router.push({
                path:'/details',
                query:{
                    id
                }
            })
            location.reload();
        },
        // 弹出框
        showPopup(){
            this.show = true;
        },
        // 点击购买
        onBuyClicked(){

        },
        // 加购
        onAddCartClicked(){
            if (this.show == false) {
                this.show = true;
            }else{
                if (!localStorage.getItem('token')) {
                    Toast.loading({
                        message: '请先登录...',
                        forbidClick: true,
                        loadingType: 'spinner',
                    });
                    this.$router.replace('/my');
                    return 
                }
                let goodsId = String(this.productList.goods_id);
                let productId = String(this.productList.id);
                // 商品加购
                cart_add({
                    goodsId:goodsId,
                    productId:productId,
                    number:this.value
                })
                .then(res=>{
                    cart_goodscount()
                    .then(res=>{
                        this.num = res.data.data.cartTotal.goodsCount;
                    })
                    .catch(err=>{
                        console.log(err);
                    })
                })
                .catch(err=>{
                    console.log(err);
                })
                this.show = false
            }
        },
        // 收藏
        onClickIcon(){
            
        },
        // 购物车
        onClickcart(){
            this.$router.push('/cart');
        }
    },
    created(){
        // 加载
        Toast.loading({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner',
        });
        if(localStorage.getItem('token')){
            // 购物车商品数量
            cart_goodscount()
            .then(res=>{
                this.num = res.data.data.cartTotal.goodsCount;
            })
            .catch(err=>{
                console.log(err);
            })
        }
        this.id = this.$route.query.id;
        scrollTo(0,0);
        // 商品详情数据
        goods_detail(this.id)
        .then(res=>{
            // console.log(res.data.data);
            this.info = res.data.data.info;
            this.issue = res.data.data.issue;
            this.attribute = res.data.data.attribute;
            this.gallery = res.data.data.gallery;
            this.attribute = res.data.data.attribute;
            this.productList = res.data.data.productList[0];
        })
        .catch(err=>{
            console.log(err);
        })
        // 相关产品
        goods_related(this.id)
        .then(res=>{
            this.realted_goods = res.data.data.goodsList
        })
        .catch(err=>{
            console.log(err);
        })
    }
};
</script>

<style lang="less" >
    .goodslists{
        font-family: 黑体;
    }
    // 顶部导航
     .top_tui{
        font-size: .13rem ;
        height: .3rem;
        line-height: .3rem;
        text-align: center;
        color: #333;
    }
    .van-icon-checked{
        color: darkred;
        padding: .05rem;
    }

    // 商品详情
    .info{
        width: 100%;
        padding: 20px 0;
        background-color: #fff;
        h2{
            font-size: .2rem;
            text-align: center;
            height: .4rem;
            line-height: .4rem;
        }
        section{
            font-size: .14rem;
            text-align: center;
            height: .4rem;
            line-height: .4rem;
        }
        div{
            font-size: .14rem;
            color: #8b0000;
            height: .4rem;
            line-height: .4rem;
            text-align: center;
        }
    }
    // 商品弹出层
    .van-popup--bottom{
        padding: 10px 20px;
        box-sizing: border-box;
        bottom: .5rem;
    }
    .goods_detail_top{
        display: flex;
        flex-wrap: nowrap;
    }
    .top_right{
        width: 100%;
        section{
            font-size: .14rem;
            margin-top: .2rem;
            color: #333;
        }
    }
    .goods_detail_bottom{
        font-size: .20rem;
        color: #333;
        section{
            margin: .1rem 0;
        }
        
    }
    // 商品导航
    // 商品参数
    .commodity_param{
        margin: .2rem 0;
        padding: .1rem;
        background-color: #fff;
        h2{
            font-size: .2rem;
            height: .4rem;
            line-height: .4rem;
        }
        ul{
            width: 100%;
            li{
                width: 100%;
                height: .3rem;
                line-height: .3rem;
                margin-top: .1rem;
                border-radius: .1rem;
                padding: 0 .05rem;
                box-sizing: border-box;
                background-color: #efefef;
                font-family: 黑体;
                font-size: .14rem;
                display: flex;
                justify-content: space-between;
                span:first-of-type{
                    // height: .3rem;
                    line-height: .3rem;
                    display: inline-block;
                    // // margin-bottom: .2rem;
                    width: 26%;
                    color: #999;
                    text-align: end;
                    margin-right: .1rem;
                }
                i{
                    display: inline-block;
                    white-space: nowrap;
                    width: 60%;
                    color: #333;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }
    .issuei{
        width: 100%;
        background-color: #fff;
       
        .content{
            li{
                padding: 0 .1rem 0 .2rem;
                h3{
                    height: .4rem;
                    line-height: .4rem;
                    color: #333;
                    font-size: .16rem;
                }
                p{
                    font-size: .14rem;
                    color: #666;
                    text-indent: 2em;
                }
            }
        }
    }
     .mytitle{
            height: .5rem;
            width: 100%;
            // background-color: lightblue;
            position: relative;
                h3{
                    width: .9rem;
                    height: .4rem;
                    line-height: .4rem;
                    font-size: .16rem;
                    text-align: center;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    margin-left: -.45rem;
                    margin-top: -.2rem;
                    background-color: #fff;
                }
                span{
                    display: block;
                    width: 1.5rem;
                    height: .02rem;
                    background-color: #ccc;
                     position: absolute;
                    left: 50%;
                    top: 50%;
                    margin-left: -.75rem;
                    margin-top: -.01rem;
                }
        }
        .related{
            width: 100%;
            background-color: #fff;
        }
        // 商品购买栏
        .commodity_navigation{
            width: 100vw;
            box-sizing: border-box;
        }
        // 产品弹出框
        .popup_goods{
            width: 100%;
        }
        .goods {
    // height: 300/100rem;
    // 商品
   .goods-pic{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        font-size: 14px;
        font-family: 黑体;
        .goods_pic{
            width: 50%;
            // height: 1.7rem;
            // background-color: aqua;
            display: flex;
            flex-direction: column;
            align-items: center;
            img{
                width: 90%;
                
            }
            span{
                display: block;
                width: 100%;
                text-align: center;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                &:first-of-type{
                    font-size: 14px;
                    color: #333;
                }
                &:nth-of-type(2){
                    color: #8b0000;
                    margin-top: .1rem;
                    margin-bottom: .3rem;
                }
            }
        }
   }
}
// 轮播
.my-swipe{
    width: 100%;
    img{
        width: 98%;
        margin: 0 1%;
    }
}
    // 设置遮罩层
    .overlay{
        width: 100%;
        // height: 30% !important;
    }
</style>